<template>
	<view class="container">
		<view class="line"></view>
		<view class="pw">
			<view class="title">请输入该账号的登录密码进行安全验证</view>
			<view class="pw-content">
				<view class="pw-left">登录密码</view>
				<u-input placeholder="请输入登录密码" v-model="form.loginPassword" type="password" :border="false" />
			</view>
			<view class="content">
				<view class="title new">请输入新的提现密码（6位数）</view>
				<u-message-input width="100" active-color="#AB61FF" inactive-color="#C3C3CD" :maxlength="6" @change="change"
				 mode="bottomLine"></u-message-input>
			</view>
		</view>
		<view class="btn" @click="submit">完成</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					loginPassword: '',
					txPassword: ''
				}
			}
		},
		methods: {
			change(e){
				this.form.txPassword = e;
			},
			async submit() {
				if (this.form.loginPassword === '') {
					this.$refs.uToast.show({
						title: '请输入登录密码',
						type: 'warning',
					})
				} else if (this.form.txPassword.length!=6) {
					this.$refs.uToast.show({
						title: '请输入完整提现密码',
						type: 'warning',
					})
				} else {
					let data = await this.$apis.updateTxpassword(this.form);
					if(data.code === 200){
						this.$refs.uToast.show({
							title: '更新成功',
							type: 'success',
							back: 'true'
						})
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 1005;

		.line {
			width: 100%;
			height: 20upx;
			background-color: #F5F5F9;

		}

		.btn {
			width: 690upx;
			margin-left: 30upx;
			height: 80upx;
			background-color: #AB61FF;
			border-radius: 40upx;
			line-height: 80upx;
			text-align: center;
			color: #fff;
			font-size: 32upx;
			margin-top: 60upx;
			position: absolute;
			bottom: 112upx;
		}

		.pw {
			padding: 30upx 0;

			.title {
				font-size: 30upx;
				color: #4B9CFF;
				height: 30upx;
				line-height: 30upx;
				margin-top: 23upx;
				padding: 0 30upx;
			}

			.content {
				.new {
					color: #0D1D36;
					margin-top: 60upx;
					margin-bottom: 15upx;
				}
			}

			.pw-content {
				height: 100upx;
				align-items: center;
				display: flex;
				justify-content: center;
				border-bottom: #f4f4f4 solid 1upx;
				padding: 0 30upx;

				.pw-left {
					color: #0D1D36;
					margin-right: 50upx;
				}
			}
		}
	}
</style>
